import 'package:flutter/material.dart';
import '../widgets/gradient_background.dart';
import '../widgets/app_button.dart';
import '../widgets/app_card.dart';

class NumberDivinationPage extends StatefulWidget {
  const NumberDivinationPage({Key? key}) : super(key: key);

  @override
  State<NumberDivinationPage> createState() => _NumberDivinationPageState();
}

class _NumberDivinationPageState extends State<NumberDivinationPage> {
  final TextEditingController _number1Controller = TextEditingController();
  final TextEditingController _number2Controller = TextEditingController();
  final _formKey = GlobalKey<FormState>();
  
  @override
  void dispose() {
    _number1Controller.dispose();
    _number2Controller.dispose();
    super.dispose();
  }
  
  void _generateHexagram() {
    if (_formKey.currentState!.validate()) {
      // 在实际应用中，这里会根据输入的数字生成卦象
      final int number1 = int.parse(_number1Controller.text);
      final int number2 = int.parse(_number2Controller.text);
      
      // 跳转到结果页面
      Navigator.pushNamed(
        context,
        '/divination-result',
        arguments: {'type': 'number', 'number1': number1, 'number2': number2},
      );
    }
  }
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: GradientBackground(
        child: SafeArea(
          child: Column(
            children: [
              // 顶部栏
              Padding(
                padding: const EdgeInsets.symmetric(
                  horizontal: 20,
                  vertical: 15,
                ),
                child: Row(
                  children: [
                    GestureDetector(
                      onTap: () => Navigator.pop(context),
                      child: const Text(
                        '←',
                        style: TextStyle(
                          fontSize: 24,
                          color: Colors.black,
                        ),
                      ),
                    ),
                    Expanded(
                      child: Center(
                        child: Text(
                          '数字起卦',
                          style: Theme.of(context).textTheme.displayMedium,
                        ),
                      ),
                    ),
                    const SizedBox(width: 24),
                  ],
                ),
              ),
              
              // 主体内容
              Expanded(
                child: Padding(
                  padding: const EdgeInsets.all(24),
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      Column(
                        children: [
                          const SizedBox(height: 32),
                          Text(
                            '数字起卦',
                            style: Theme.of(context).textTheme.displayLarge,
                          ),
                          const SizedBox(height: 16),
                          Text(
                            '输入两个数字，与你心念相应。',
                            style: Theme.of(context).textTheme.bodyLarge?.copyWith(
                              color: Colors.black.withOpacity(0.7),
                            ),
                          ),
                          const SizedBox(height: 48),
                          
                          // 数字输入卡片
                          AppCard(
                            padding: const EdgeInsets.all(24),
                            child: Form(
                              key: _formKey,
                              child: Column(
                                children: [
                                  _buildNumberInput(
                                    label: '第一个数字 (1-8)',
                                    controller: _number1Controller,
                                    min: 1,
                                    max: 8,
                                  ),
                                  const SizedBox(height: 24),
                                  _buildNumberInput(
                                    label: '第二个数字 (1-6)',
                                    controller: _number2Controller,
                                    min: 1,
                                    max: 6,
                                  ),
                                ],
                              ),
                            ),
                          ),
                        ],
                      ),
                      
                      // 底部按钮
                      Column(
                        children: [
                          AppPrimaryButton(
                            text: '生成卦象',
                            onPressed: _generateHexagram,
                          ),
                          const SizedBox(height: 16),
                          AppSecondaryButton(
                            text: '取消',
                            onPressed: () => Navigator.pop(context),
                          ),
                        ],
                      ),
                    ],
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
  
  Widget _buildNumberInput({
    required String label,
    required TextEditingController controller,
    required int min,
    required int max,
  }) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text(
          label,
          style: Theme.of(context).textTheme.bodyMedium?.copyWith(
            fontWeight: FontWeight.w500,
            color: Colors.black.withOpacity(0.7),
          ),
        ),
        const SizedBox(height: 8),
        TextFormField(
          controller: controller,
          keyboardType: TextInputType.number,
          decoration: const InputDecoration(
            hintText: '请输入数字',
          ),
          validator: (value) {
            if (value == null || value.isEmpty) {
              return '请输入数字';
            }
            final int? number = int.tryParse(value);
            if (number == null) {
              return '请输入有效数字';
            }
            if (number < min || number > max) {
              return '请输入 $min-$max 之间的数字';
            }
            return null;
          },
        ),
      ],
    );
  }
}